<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="images/favicon.png">

    <title>Clean Zone</title>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,400italic,700,800' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Raleway:300,200,100' rel='stylesheet' type='text/css'>

    <!-- Bootstrap core CSS -->
    <link href="js/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="js/jquery.gritter/css/jquery.gritter.css" />

    <!-- Custom styles for this template -->
    <link href="css/style.css" rel="stylesheet" />

    <link rel="stylesheet" href="fonts/font-awesome-4/css/font-awesome.min.css">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <![endif]-->
    <link rel="stylesheet" type="text/css" href="js/jquery.nanoscroller/nanoscroller.css" />
	
    <link rel="stylesheet" type="text/css" href="js/jquery.easypiechart/jquery.easy-pie-chart.css" />
	
	
    <link rel="stylesheet" type="text/css" href="js/bootstrap.switch/bootstrap-switch.css" />
    <link rel="stylesheet" type="text/css" href="js/bootstrap.datetimepicker/css/bootstrap-datetimepicker.min.css" />
    <link rel="stylesheet" type="text/css" href="js/jquery.select2/select2.css" />
    <link rel="stylesheet" type="text/css" href="js/bootstrap.slider/css/slider.css" />
	
  </head>

  <body>
  <!-- Fixed navbar -->
  <div id="head-nav" class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="fa fa-gear"></span>
        </button>
        <a class="navbar-brand" href="#"><span>Clean Zone</span></a>
      </div>
      <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#about">About</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Contact <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
      <li class="dropdown-submenu"><a href="#">Sub menu</a>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          </ul>
      </li>              
      </ul>
          </li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Large menu <b class="caret"></b></a>
      <ul class="dropdown-menu col-menu-2">
        <li class="col-sm-6 no-padding">
          <ul>
          <li class="dropdown-header"><i class="fa fa-group"></i>Users</li>
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li class="dropdown-header"><i class="fa fa-gear"></i>Config</li>
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li> 
          </ul>
        </li>
        <li  class="col-sm-6 no-padding">
          <ul>
          <li class="dropdown-header"><i class="fa fa-legal"></i>Sales</li>
          <li><a href="#">New sale</a></li>
          <li><a href="#">Register a product</a></li>
          <li><a href="#">Register a client</a></li> 
          <li><a href="#">Month sales</a></li>
          <li><a href="#">Delivered orders</a></li>
          </ul>
        </li>
      </ul>
          </li>
        </ul>
    <ul class="nav navbar-nav navbar-right user-nav">
      <li class="dropdown profile_menu">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><img alt="Avatar" src="images/avatar2.jpg" />Jeff Hanneman <b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li><a href="#">My Account</a></li>
          <li><a href="#">Profile</a></li>
          <li><a href="#">Messages</a></li>
          <li class="divider"></li>
          <li><a href="#">Sign Out</a></li>
        </ul>
      </li>
    </ul>			
    <ul class="nav navbar-nav navbar-right not-nav">
      <li class="button dropdown">
        <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown"><i class=" fa fa-comments"></i></a>
        <ul class="dropdown-menu messages">
          <li>
            <div class="nano nscroller">
              <div class="content">
                <ul>
                  <li>
                    <a href="#">
                      <img src="images/avatar2.jpg" alt="avatar" /><span class="date pull-right">13 Sept.</span> <span class="name">Daniel</span> I'm following you, and I want your money! 
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="images/avatar_50.jpg" alt="avatar" /><span class="date pull-right">20 Oct.</span><span class="name">Adam</span> is now following you 
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="images/avatar4_50.jpg" alt="avatar" /><span class="date pull-right">2 Nov.</span><span class="name">Michael</span> is now following you 
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="images/avatar3_50.jpg" alt="avatar" /><span class="date pull-right">2 Nov.</span><span class="name">Lucy</span> is now following you 
                    </a>
                  </li>
                </ul>
              </div>
            </div>
            <ul class="foot"><li><a href="#">View all messages </a></li></ul>           
          </li>
        </ul>
      </li>
      <li class="button dropdown">
        <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-globe"></i><span class="bubble">2</span></a>
        <ul class="dropdown-menu">
          <li>
            <div class="nano nscroller">
              <div class="content">
                <ul>
                  <li><a href="#"><i class="fa fa-cloud-upload info"></i><b>Daniel</b> is now following you <span class="date">2 minutes ago.</span></a></li>
                  <li><a href="#"><i class="fa fa-male success"></i> <b>Michael</b> is now following you <span class="date">15 minutes ago.</span></a></li>
                  <li><a href="#"><i class="fa fa-bug warning"></i> <b>Mia</b> commented on post <span class="date">30 minutes ago.</span></a></li>
                  <li><a href="#"><i class="fa fa-credit-card danger"></i> <b>Andrew</b> killed someone <span class="date">1 hour ago.</span></a></li>
                </ul>
              </div>
            </div>
            <ul class="foot"><li><a href="#">View all activity </a></li></ul>           
          </li>
        </ul>
      </li>
      <li class="button"><a href="javascript:;" class="speech-button"><i class="fa fa-microphone"></i></a></li>				
    </ul>

      </div><!--/.nav-collapse -->
    </div>
  </div>
  
	<div id="cl-wrapper">
		<div class="cl-sidebar">
			<div class="cl-toggle"><i class="fa fa-bars"></i></div>
			<div class="cl-navblock">
        <div class="menu-space">
          <div class="content">
            <div class="side-user">
              <div class="avatar"><img src="images/avatar1_50.jpg" alt="Avatar" /></div>
              <div class="info">
                <a href="#">Jeff Hanneman</a>
                <img src="images/state_online.png" alt="Status" /> <span>Online</span>
              </div>
            </div>
            <ul class="cl-vnavigation">
              <li><a href="#"><i class="fa fa-home"></i><span>Dashboard</span></a>
                <ul class="sub-menu">
                  <li><a href="index.html">Version 1</a></li>
                  <li><a href="dashboard2.html"><span class="label label-primary pull-right">New</span> Version 2</a></li>
                </ul>
              </li>
              <li><a href="#"><i class="fa fa-smile-o"></i><span>UI Elements</span></a>
                <ul class="sub-menu">
                  <li class="active"><a href="ui-elements.html">General</a></li>
                  <li><a href="ui-buttons.html">Buttons</a></li>
                  <li><a href="ui-modals.html"><span class="label label-primary pull-right">New</span> Modals</a></li>
                  <li><a href="ui-notifications.html"><span class="label label-primary pull-right">New</span> Notifications</a></li>
                  <li><a href="ui-icons.html">Icons</a></li>
                  <li><a href="ui-grid.html">Grid</a></li>
                  <li><a href="ui-tabs-accordions.html">Tabs & Acordions</a></li>
                  <li><a href="ui-nestable-lists.html">Nestable Lists</a></li>
                  <li><a href="ui-treeview.html">Tree View</a></li>
                </ul>
              </li>
              <li><a href="#"><i class="fa fa-list-alt"></i><span>Forms</span></a>
                <ul class="sub-menu">
                  <li><a href="form-elements.html">Components</a></li>
                  <li><a href="form-validation.html">Validation</a></li>
                  <li><a href="form-wizard.html">Wizard</a></li>
                  <li><a href="form-masks.html">Input Masks</a></li>
                  <li><a href="form-multiselect.html"><span class="label label-primary pull-right">New</span>Multi Select</a></li>
                  <li><a href="form-wysiwyg.html"><span class="label label-primary pull-right">New</span>WYSIWYG Editor</a></li>
                  <li><a href="form-upload.html"><span class="label label-primary pull-right">New</span>Multi Upload</a></li>
                </ul>
              </li>
              <li><a href="#"><i class="fa fa-table"></i><span>Tables</span></a>
                <ul class="sub-menu">
                  <li><a href="tables-general.html">General</a></li>
                  <li><a href="tables-datatables.html"><span class="label label-primary pull-right">New</span>Data Tables</a></li>
                </ul>
              </li>              
              <li><a href="#"><i class="fa fa-map-marker nav-icon"></i><span>Maps</span></a>
                <ul class="sub-menu">
                  <li><a href="maps.html">Google Maps</a></li>
                  <li><a href="vector-maps.html"><span class="label label-primary pull-right">New</span>Vector Maps</a></li>
                </ul>
              </li>             
              <li><a href="#"><i class="fa fa-envelope nav-icon"></i><span>Email</span></a>
                <ul class="sub-menu">
                  <li><a href="email-inbox.html">Inbox</a></li>
                  <li><a href="email-read.html">Email Detail</a></li>
                  <li><a href="email-compose.html"><span class="label label-primary pull-right">New</span>Email Compose</a></li>
                </ul>
              </li>
              <li><a href="typography.html"><i class="fa fa-text-height"></i><span>Typography</span></a></li>
              <li><a href="charts.html"><i class="fa fa-bar-chart-o"></i><span>Charts</span></a></li>
              <li><a href="#"><i class="fa fa-file"></i><span>Pages</span></a>
                <ul class="sub-menu">
                  <li><a href="pages-blank.html">Blank Page</a></li>
                  <li><a href="pages-blank-header.html">Blank Page Header</a></li>
                  <li><a href="pages-blank-aside.html">Blank Page Aside</a></li>
                  <li><a href="pages-login.html">Login</a></li>
                  <li><a href="pages-404.html">404 Page</a></li>
                  <li><a href="pages-500.html">500 Page</a></li>
                  <li><a href="pages-sign-up.html"><span class="label label-primary pull-right">New</span>Sign Up</a></li>
                  <li><a href="pages-forgot-password.html"><span class="label label-primary pull-right">New</span>Forgot Password</a></li>
                  <li><a href="pages-profile.html"><span class="label label-primary pull-right">New</span>Profile</a></li>
                  <li><a href="pages-search.html"><span class="label label-primary pull-right">New</span>Search</a></li>
                  <li><a href="pages-calendar.html"><span class="label label-primary pull-right">New</span>Calendar</a></li>
                  <li><a href="pages-code-editor.html"><span class="label label-primary pull-right">New</span>Code Editor</a></li>
                  <li><a href="pages-gallery.html">Gallery</a></li>
                  <li><a href="pages-timeline.html">Timeline</a></li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
        <div class="text-right collapse-button" style="padding:7px 9px;">
          <input type="text" class="form-control search" placeholder="Search..." />
          <button id="sidebar-collapse" class="btn btn-default" style=""><i style="color:#fff;" class="fa fa-angle-left"></i></button>
        </div>
			</div>
		</div>
		
		<div class="container-fluid" id="pcont">
			<div class="page-head">
				<h2>General Elements</h2>
				<ol class="breadcrumb">
				  <li><a href="#">Home</a></li>
				  <li><a href="#">UI Elements</a></li>
				  <li class="active">General</li>
				</ol>
			</div>		
		<div class="cl-mcont">
			<div class="row dash-cols">
				<div class="col-sm-6 col-md-6">
				
					<div class="block-flat">
						<div class="header">
							<div class="pull-right actions">
							</div>							
							<h3>Theme Alerts</h3>
						</div>
						<div class="content">
							 
							 <div class="alert alert-success alert-white rounded">
								<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
								<div class="icon"><i class="fa fa-check"></i></div>
								<strong>Success!</strong> Changes has been saved successfully!
							 </div>
							 
							 <div class="alert alert-info alert-white rounded">
								<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
								<div class="icon"><i class="fa fa-info-circle"></i></div>
								<strong>Info!</strong> You have 3 new messages in your inbox.
							 </div>
							 
							 <div class="alert alert-warning alert-white rounded">
								<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
								<div class="icon"><i class="fa fa-warning"></i></div>
								<strong>Alert!</strong> Don't forget to save your data.
							 </div>
							 
							 <div class="alert alert-danger alert-white rounded">
								<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
								<div class="icon"><i class="fa fa-times-circle"></i></div>
								<strong>Error!</strong> The server is not responding, try again later.
							 </div>
							 
						</div>
					</div>
					
					
					<div class="block-flat">
						<div class="header">
							<h3>Dropdown Menus</h3>
						</div>
						<div class="content">
							<div class="cl col-md-6">
								<h4>Simple Menu</h4>
								<div class="dropdown clearfix">
								  <ul class="dropdown-menu static-mn spacer">
									<li><a tabindex="-1" href="#">Action</a></li>
									<li><a tabindex="-1" href="#">Another action</a></li>
									<li><a tabindex="-1" href="#">Something else here</a></li>
									<li class="divider"></li>
									<li><a tabindex="-1" href="#">Separated link</a></li>
								  </ul>
								</div>
							</div>
							<div class="cl col-md-6">
								<h4>Sub Menu</h4>
								<div class="dropdown clearfix">
								  <ul class="dropdown-menu static-mn spacer">
									<li><a href="#">Action</a></li>
									<li><a href="#">Another action</a></li>
									<li><a href="#">Something else here</a></li>
									<li class="divider"></li>
									<li class="dropdown-submenu"><a href="#">Sub menu</a>
										<ul class="dropdown-menu">
											<li><a href="#">Action</a></li>
											<li><a href="#">Another action</a></li>
											<li><a href="#">Something else here</a></li>
										  </ul>
									</li>              
								  </ul>
								</div>							
							</div>
							<div class="clearfix"></div>
							<div class="col-md-12 clearfix spacer">
								<h4>Two column menu</h4>
								<div class="static-lg-menu">
									<ul class="dropdown-menu col-menu-2 static-mn static-mn spacer">
                    <li class="col-sm-6 no-padding">
                      <ul>
                      <li class="dropdown-header"><i class="fa fa-group"></i>Users</li>
                      <li><a href="#">Action</a></li>
                      <li><a href="#">Another action</a></li>
                      <li><a href="#">Something else here</a></li>
                      <li class="dropdown-header"><i class="fa fa-gear"></i>Config</li>
                      <li><a href="#">Action</a></li>
                      <li><a href="#">Another action</a></li>
                      <li><a href="#">Something else here</a></li> 
                      </ul>
                    </li>
                    <li  class="col-sm-6 no-padding">
                      <ul>
                      <li class="dropdown-header"><i class="fa fa-legal"></i>Sales</li>
                      <li><a href="#">New sale</a></li>
                      <li><a href="#">Register a product</a></li>
                      <li><a href="#">Register a client</a></li> 
                      <li><a href="#">Month sales</a></li>
                      <li><a href="#">Delivered orders</a></li>
                      </ul>
                    </li>
									</ul>
								</div>
							</div>
              <div class="clearfix"></div>
						</div>
					</div>		
					
					
				</div>	
				
				<div class="col-sm-6 col-md-6">
					
					
					<div class="block-flat">
						<div class="header">
							<h3>Bootstrap Alerts</h3>
						</div>
						<div class="content">
							 <div class="alert alert-success">
								<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
								<i class="fa fa-check sign"></i><strong>Success!</strong> Changes has been saved successfully!
							 </div>
							 <div class="alert alert-info">
								<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
								<i class="fa fa-info-circle sign"></i><strong>Info!</strong> You have 3 new messages in your inbox.
							 </div>
							 <div class="alert alert-warning">
								<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
								<i class="fa fa-warning sign"></i><strong>Alert!</strong> Don't forget to save your data.
							 </div>
							 <div class="alert alert-danger">
								<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
								<i class="fa fa-times-circle sign"></i><strong>Error!</strong> The server is not responding, try again later.
							 </div>
						</div>
					</div>
		
		
					<div class="block-flat">
						<div class="header">
							<h3>Headings</h3>
						</div>
						<div class="content">
							<h1>Heading Text 1</h1>
							<h2>Heading Text 2</h2>
							<h3>Heading Text 3</h3>
							<h4>Heading Text 4</h4>
							<h5>Heading Text 5</h5>
							<h6>Heading Text 6</h6>
							<div class="spacer">&nbsp;</div>
							<h1 class="hthin">Thin Heading 1</h1>
							<h2 class="hthin">Thin Heading 2</h2>
							<h3 class="hthin">Thin Heading 3</h3>
							<p class="spacer">
								To use thin headings, set <code>".hthin"</code> class in heading tag.
							</p>
						</div>
					</div>
					
					
				</div>
					
			</div>
			<div class="row">
				<div class="col-sm-6 col-md-6">
					<div class="block-flat">
						<div class="header">
							<h3>Labels and Badges</h3>
						</div>
						<div class="content">
							<table class="">
								<thead class="no-border">
									<tr>
										<th>Type</th>
										<th class="text-center">Label</th>
										<th class="text-center">Icon</th>
										<th class="text-center">Badge</th>
									</tr>
								</thead>
								<tbody class="">
									<tr>
										<td style="width:30%;">Default</td>
										<td class="text-center"><span class="label label-default">Default</span></td>
										<td class="text-center"><a class="label label-default" href="#"><i class="fa fa-pencil"></i></a></td>
										<td class="text-center"><span class="badge">25</span></td>
									</tr>
									<tr>
										<td>Primary</td>
										<td class="text-center"><span class="label label-primary">Primary</span></td>
										<td class="text-center"><a class="label label-primary" href="#"><i class="fa fa-pencil"></i></a></td>
										<td class="text-center"><span class="badge badge-primary">6</span></td>
									</tr>
									<tr>
										<td>Success</td>
										<td class="text-center"><span class="label label-success">Success</span></td>
										<td class="text-center"><a class="label label-success" href="#"><i class="fa fa-pencil"></i></a></td>
										<td class="text-center"><span class="badge badge-success">8</span></td>
									</tr>
									<tr>
										<td>Info</td>
										<td class="text-center"><span class="label label-info">Info</span></td>
										<td class="text-center"><a class="label label-info" href="#"><i class="fa fa-info-circle"></i></a></td>
										<td class="text-center"><span class="badge badge-info">3</span></td>
									</tr>
									<tr>
										<td>Warning</td>
										<td class="text-center"><span class="label label-warning">Warning</span></td>
										<td class="text-center"><a class="label label-warning" href="#"><i class="fa fa-warning"></i></a></td>
										<td class="text-center"><span class="badge badge-warning">5</span></td>
									</tr>
									<tr>
										<td>Danger</td>
										<td class="text-center"><span class="label label-danger">Danger</span></td>
										<td class="text-center"><a class="label label-danger" href="#"><i class="fa fa-pencil"></i></a></td>
										<td class="text-center"><span class="badge badge-danger">54</span></td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>
					
					<div class="block-flat">
						<div class="header">							
							<h3>Pagination</h3>
						</div>
						<div class="content">
							<div>
								<ul class="pagination pagination-lg">
								  <li class="disabled"><a href="#">&laquo;</a></li>
								  <li class="active"><a href="#">1</a></li>
								  <li><a href="#">2</a></li>
								  <li><a href="#">3</a></li>
								  <li><a href="#">4</a></li>
								  <li><a href="#">5</a></li>
								  <li><a href="#">&raquo;</a></li>
								</ul>
							</div>
							<div>							
								<ul class="pagination">
								  <li><a href="#">&laquo;</a></li>
								  <li><a href="#">1</a></li>
								  <li><a href="#">2</a></li>
								  <li><a href="#">3</a></li>
								  <li><a href="#">4</a></li>
								  <li><a href="#">5</a></li>
								  <li><a href="#">&raquo;</a></li>
								</ul>
							</div>
							<div>
								<ul class="pagination  pagination-sm">
								  <li><a href="#">&laquo;</a></li>
								  <li><a href="#">1</a></li>
								  <li><a href="#">2</a></li>
								  <li><a href="#">3</a></li>
								  <li><a href="#">4</a></li>
								  <li><a href="#">5</a></li>
								  <li><a href="#">&raquo;</a></li>
								</ul>
							</div>
						</div>
					</div>
					
					
					<div class="block-flat">
						<div class="header">							
							<h3>Tooltips</h3>
						</div>
						<div class="content">
								<h4>Examples</h4>
								<p>This is just an example of tooltip in a paragrhap content writen by <a data-toggle="tooltip" href="#" data-original-title="Default tooltip">Author</a>, as you can see it is a clean design with many <a data-toggle="tooltip" href="#" data-original-title="I am a Tooltip">Tooltip</a> options.</p>
								<div class="spacer2 text-center">
									<button data-placement="left" data-toggle="tooltip" data-original-title="Tooltip on left" type="button" class="btn btn-primary"><i class="fa fa-chevron-circle-left"></i> On Left</button>
									<button data-placement="top" data-toggle="tooltip" data-original-title="Tooltip on top" type="button" class="btn btn-primary"><i class="fa fa-chevron-circle-up"></i> On Top</button>
									<button data-placement="bottom" data-toggle="tooltip" data-original-title="Tooltip on bottom" type="button" class="btn btn-primary"><i class="fa fa-chevron-circle-down"></i> On Bottom</button>
									<button data-placement="right" data-toggle="tooltip" data-original-title="Tooltip on right" type="button" class="btn btn-primary"><i class="fa fa-chevron-circle-right"></i> On Right</button>
								</div>

						</div>
					</div>
					
					<div class="block-flat">
						<div class="header">							
							<h3>Popovers</h3>
						</div>
						<div class="content">
							<h4>Examples</h4>
							<p>This is just an example of popover use in a paragrhap content without a title writen by <a href="javascript:;" data-popover="popover" data-content="This is a popover without a title!" data-placement="top">Author</a>, and there is another example with a title <a href="javascript:;" data-popover="popover" data-original-title="Popover Title" data-content="This is a popover with a title!" data-placement="top">Tooltip</a> options.</p>
							<div class="spacer2 text-center">
								<button data-popover="popover" type="button" class="btn btn-primary" data-original-title="Popover in top" data-content="This is the popover content space, put your ideas here!" data-placement="top" data-trigger="hover"><i class="fa fa-chevron-circle-up"></i> On Top</button>
								<button data-popover="popover" type="button" class="btn btn-primary" data-original-title="Popover in left" data-content="This is the popover content space, put your ideas here!" data-placement="left" data-trigger="hover"><i class="fa fa-chevron-circle-left"></i> On Left</button>
								<button data-popover="popover" type="button" class="btn btn-primary" data-original-title="Popover in right" data-content="This is the popover content space, put your ideas here!" data-placement="right" data-trigger="hover"><i class="fa fa-chevron-circle-right"></i> On Right</button>
								<button data-popover="popover" type="button" class="btn btn-primary" data-original-title="Popover in bottom" data-content="This is the popover content space, put your ideas here!" data-placement="bottom" data-trigger="hover"><i class="fa fa-chevron-circle-down"></i> On Bottom</button>
							</div>
						</div>
					</div>
          
          <div class="block dark-list">
						<div class="header">
							<h2>Dark list <span class="pull-right">#45</span></h2>
							<h3>Your order has been delivered</h3>
						</div>
						<div class="content no-padding ">
							<ul class="items">
								<li>
									<i class="fa fa-file-text"></i>Filet Mignon <span class="pull-right value">$35</span>
									<small>Italian food</small>
								</li>
								<li>
									<i class="fa fa-file-text"></i>Blue beer<span class="pull-right value">$35</span>
									<small>Bar drinks</small>
								</li>
								<li>
									<i class="fa fa-file-text"></i>T-shirts<span class="pull-right value">$35</span>
									<small>Software development</small>
								</li>
								<li>
									<i class="fa fa-file-text"></i>Cloud App<span class="pull-right value">$35</span>
									<small>Game department</small>
								</li>
								<li>
									<i class="fa fa-file-text"></i>Black Metal Music<span class="pull-right value">$35</span>
									<small>Metal genre</small>
								</li>
							</ul>
						</div>
							<div class="total-data">
								<a data-toggle="dropdown" class="dropdown-toggle" href="#">
									<h2>Total <b class="caret"></b> <span class="pull-right">$25.3</span></h2>
								</a>
								<ul class="dropdown-menu">
									<li><a href="#">Print receipt</a></li>
									<li><a href="#">Send invoice to...</a></li>
									<li><a href="#">Payment</a></li>
								</ul>
							</div>
					</div>


          <nav class="navbar navbar-inverse" role="navigation">
            <div class="container-fluid">
              <!-- Brand and toggle get grouped for better mobile display -->
              <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                  <span class="sr-only">Toggle navigation</span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Brand</a>
              </div>

              <!-- Collect the nav links, forms, and other content for toggling -->
              <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                  <li class="active"><a href="#">Link</a></li>
                  <li><a href="#">Link</a></li>
                  <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                      <li><a href="#">Action</a></li>
                      <li><a href="#">Another action</a></li>
                      <li><a href="#">Something else here</a></li>
                      <li class="divider"></li>
                      <li><a href="#">Separated link</a></li>
                      <li class="divider"></li>
                      <li><a href="#">One more separated link</a></li>
                    </ul>
                  </li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                  <li><a href="#">Link</a></li>
                  <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                      <li><a href="#">Action</a></li>
                      <li><a href="#">Another action</a></li>
                      <li><a href="#">Something else here</a></li>
                      <li class="divider"></li>
                      <li><a href="#">Separated link</a></li>
                    </ul>
                  </li>
                </ul>
              </div><!-- /.navbar-collapse -->
            </div><!-- /.container-fluid -->
          </nav>
          
          
          
          <div class="block-flat">
            <div class="content no-padding">
              <h4 class="title">Ticket Style list</h4>
              <div class="list-group tickets">
							  <li href="#" class="list-group-item">Unread <span class="badge badge-primary">20</span></li>
							  <li href="#" class="list-group-item">Open Tickets <span class="badge badge-success">35</span></li>
							  <li href="#" class="list-group-item">Closed Tickets <span class="badge">45</span></li>
							</div>	            
            </div>
          </div>
          
				</div>
				
				<div class="col-sm-6 col-md-6">

					<div class="block-flat">
						<div class="header">							
							<h3>Basic List Group</h3>
						</div>
						<div class="content">
							<ul class="list-group">
							  <li class="list-group-item">Cras justo odio</li>
							  <li class="list-group-item">Dapibus ac facilisis in</li>
							  <li class="list-group-item">Morbi leo risus</li>
							  <li class="list-group-item">Porta ac consectetur ac</li>
							  <li class="list-group-item">Vestibulum at eros</li>
							</ul>
						</div>
					</div>
					
					<div class="block-flat">
						<div class="header">							
							<h3>Linked Items</h3>
						</div>
						<div class="content">
							<div class="list-group">
							  <a href="#" class="list-group-item active">Cras justo odio <span class="badge">25</span></a>
							  <a href="#" class="list-group-item">Dapibus ac facilisis in <span class="badge">25</span></a>
							  <a href="#" class="list-group-item">Morbi leo risus <span class="badge">25</span></a>
							  <a href="#" class="list-group-item">Porta ac consectetur ac <span class="badge">25</span></a>
							  <a href="#" class="list-group-item">Vestibulum at eros <span class="badge">25</span></a>
							</div>
						</div>
					</div>
					
					<div class="block-flat">
						<div class="header">							
							<h3>Custom Content</h3>
						</div>
						<div class="content">
							<div class="list-group">
							  <a href="#" class="list-group-item active">
								<h5 class="list-group-item-heading">John Doe</h5>
								<div><i class="fa fa-mobile-phone"></i> 457 760 3244</div>
								<div><i class="fa fa-envelope"></i> johndoe@emailserver.com</div>
							  </a>
							  <a href="#" class="list-group-item">
								<h5 class="list-group-item-heading">Mark Anonymous Person</h5>
								<div><i class="fa fa-mobile-phone"></i> 547 457 7484</div>
								<div><i class="fa fa-envelope"></i> markanonymous@emailserver.com</div>
							  </a>
							  <a href="#" class="list-group-item">
								<h5 class="list-group-item-heading">Jessica Smith Norway</h5>
								<div><i class="fa fa-mobile-phone"></i> 595 541 9578</div>
								<div><i class="fa fa-envelope"></i> jessysmith@emailserver.com</div>
							  </a>
							</div>						
						</div>
					</div>
					
					<div class="block-flat">
						<div class="header">
							<h3>Progress Bars</h3>
						</div>
						<div class="content">
							<h4>Simple</h4>
							<div class="progress">
							  <div class="progress-bar progress-bar-success" style="width: 40%">40%</div>
							</div>
							<div class="progress">
							  <div class="progress-bar progress-bar-info" style="width: 20%">20%</div>
							</div>
							<div class="progress">
							  <div class="progress-bar progress-bar-warning" style="width: 60%">60%</div>
							</div>
							<div class="progress">
							  <div class="progress-bar progress-bar-danger" style="width: 80%">80%</div>
							</div>
							
							<h4 class="spacer2">Striped</h4>
							<div class="progress progress-striped">
							  <div class="progress-bar progress-bar-success" style="width: 20%">20%</div>
							</div>
							<div class="progress progress-striped">
							  <div class="progress-bar progress-bar-info" style="width: 40%">40%</div>
							</div>
							<div class="progress progress-striped">
							  <div class="progress-bar progress-bar-warning" style="width: 60%">60%</div>
							</div>
							<div class="progress progress-striped">
							  <div class="progress-bar progress-bar-danger" style="width: 80%">80%</div>
							</div>
							
							<h4 class="spacer2">Animated</h4>
							<div class="progress progress-striped active">
							  <div class="progress-bar progress-bar-success" style="width: 20%">20%</div>
							</div>
							<div class="progress progress-striped active">
							  <div class="progress-bar progress-bar-info" style="width: 40%">40%</div>
							</div>
							<div class="progress progress-striped active">
							  <div class="progress-bar progress-bar-warning" style="width: 60%">60%</div>
							</div>
							<div class="progress progress-striped active">
							  <div class="progress-bar progress-bar-danger" style="width: 80%">80%</div>
							</div>
							
							<h4 class="spacer2">Stacked</h4>
							<div class="progress progress-striped active">
							  <div class="progress-bar progress-bar-success" style="width: 20%">20%</div>
							  <div class="progress-bar progress-bar-info" style="width: 20%">20%</div>
							  <div class="progress-bar progress-bar-warning" style="width: 30%">30%</div>
							  <div class="progress-bar progress-bar-danger" style="width: 10%">10%</div>
							</div>
						</div>
					</div>
				
					
				</div>			
			</div>
			
		  </div>
		</div> 
		
	</div>

    <script src="js/jquery.js"></script>
	<script type="text/javascript" src="js/jquery.nanoscroller/jquery.nanoscroller.js"></script>
	<script type="text/javascript" src="js/jquery.sparkline/jquery.sparkline.min.js"></script>
	<script type="text/javascript" src="js/jquery.easypiechart/jquery.easy-pie-chart.js"></script>
	<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false"></script>
	<script type="text/javascript" src="js/behaviour/general.js"></script>
  <script src="js/jquery.ui/jquery-ui.js" type="text/javascript"></script>
	<script type="text/javascript" src="js/jquery.nestable/jquery.nestable.js"></script>
	<script type="text/javascript" src="js/bootstrap.switch/bootstrap-switch.min.js"></script>
	<script type="text/javascript" src="js/bootstrap.datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
  <script src="js/jquery.select2/select2.min.js" type="text/javascript"></script>
  <script src="js/bootstrap.slider/js/bootstrap-slider.js" type="text/javascript"></script>
  <script type="text/javascript" src="js/jquery.gritter/js/jquery.gritter.js"></script>

  <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script type="text/javascript">
      $(document).ready(function(){
        App.init();
      });
    </script>
  <script src="js/behaviour/voice-commands.js"></script>
  <script src="js/bootstrap/dist/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="js/jquery.flot/jquery.flot.js"></script>
	<script type="text/javascript" src="js/jquery.flot/jquery.flot.pie.js"></script>
	<script type="text/javascript" src="js/jquery.flot/jquery.flot.resize.js"></script>
	<script type="text/javascript" src="js/jquery.flot/jquery.flot.labels.js"></script>
  </body>
</html>
